<script setup>
import {toRefs} from "vue";
import {useStore} from "vuex";
import Home from "@/views/home.vue";
import about from "@/views/about.vue";
const store = useStore()
let {name, age, address} = toRefs(store.state.userInfo)
const change = () => {
  store.commit("changeUserInfoMutation",2)
}
</script>
<template>
  <div class="layui-panel" id="App">
    <h1>App组件</h1>
    <h1>userInfo的name:{{ name }}</h1>
    <h1>userInfo的age:{{ age }}</h1>
    <h1>userInfo的address:{{ address }}</h1>
    <button type="button" class="layui-btn" @click="change">从App组件中修改store中的userInfo</button>
    <home></home>
    <about></about>
  </div>
</template>

<style lang="less">
.layui-panel {
  padding: 30px;
}
</style>
